<template>
  <div>
    <h1>This is home Page!!!!</h1>
    <input type="button" value="弹出框" @click="clk"/>
    <sweet-alert 
      :show.sync="alert.show" 
      :title.sync="alert.title" 
      :msg.sync="alert.msg"
      :type.sync="alert.type"
      :confirm-callback="alert.confirmCallback"
      :concel-callback="alert.concelCallback"
      :close-modal="closeModal">
    </sweet-alert>
    <datetime-picker :result1.sync="result1"
          :result2.sync="result2"
          :result3.sync="result3"
          :result4.sync="result4"
          :start-datetime.sync="startDatetime"
          :end-datetime.sync="endDatetime">
    </datetime-picker>
  </div>
</template>

<script>
import DatetimePicker from '../components/DatetimePicker'
import SweetAlert from '../components/SweetAlert'
export default {
  name: 'HomeView',
  data () {
    return {
      result1: null,
      result2: null,
      result3: null,
      result4: null,
      startDatetime: new Date(),
      endDatetime: null,
      alert: {
        show: false,
        title: '这是一个测试',
        msg: '弹出框测试',
        type: 'warn',
        confirmCallback: null,
        cancelCallback: null
      }
    }
  },
  route: {
    data () {
      return {}
    }
  },
  components: {
    DatetimePicker,
    SweetAlert
  },
  methods: {
    clk () {
      this.openModal()
      this.alert.show = !this.alert.show
    },
    fadeIn (elem, interval) {
      if (+elem.style.opacity < 1) {
        interval = interval || 16
        elem.style.opacity = 0
        let last = +new Date()
        let tick = () => {
          elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100
          last = +new Date()

          if (+elem.style.opacity < 1) {
            setTimeout(tick, interval)
          }
        }
        tick()
      }
      // elem.style.display = 'block'; //fallback IE8
    },
    fadeOut (elem, interval) {
      interval = interval || 16
      elem.style.opacity = 1
      let last = +new Date()
      let tick = () => {
        elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100
        last = +new Date()

        if (+elem.style.opacity > 0) {
          setTimeout(tick, interval)
        }
      }
      tick()
    },
    openModal () {
      let alertModal = this.$el.querySelector('.sweet-alert')
      this.fixVerticalPosition(alertModal)
      this.fadeIn(this.$el.querySelector('.sweet-overlay'), 10)
      this.fadeIn(alertModal, 10)
    },
    closeModal () {
      this.fadeOut(this.$el.querySelector('.sweet-overlay'), 5)
      this.fadeOut(this.$el.querySelector('.sweet-alert'), 5)
    },
    fixVerticalPosition (elem) {
      elem.style.left = '-9999px'
      elem.style.display = 'block'
      let height = elem.clientHeight
      let padding = 0
      if (typeof getComputedStyle !== 'undefined') { /* IE 8 */
        padding = parseInt(window.getComputedStyle(elem).getPropertyValue('padding'), 10)
      } else {
        padding = parseInt(elem.currentStyle.padding)
      }

      elem.style.left = ''
      elem.style.display = 'none'
      elem.style.marginTop = ('-' + parseInt(height / 2 + padding) + 'px')
      // return ('-' + parseInt(height / 2 + padding) + 'px');
    }
  },
  ready () {
    this.alert.confirmCallback = () => {
      this.closeModal()
      this.alert.show = false
    }
    this.alert.cancelCallback = () => {
      this.closeModal()
      this.alert.show = false
    }
  }
}
</script>